<template>
    <view class="page flexCss">
        <navHead :datas="headData"></navHead>
        <view class="box pd-30">

            <view style="flex: 1;">

                <view class="input_box bd-r40 pd-20">
                    <view class="ft-28 c-33 fw-800">请输入昵称</view>
                    <!-- <u--input placeholder="请输入内容" border="surround" v-model="value" @change="change"></u--input> -->
                    <view class="input_bg bd-r20">
                        <input v-model="inputVal" placeholder="请输入昵称" style="font-size: 24rpx;"
                            placeholder-class="input-placeholder" @input="change" :maxLength="8" />
                    </view>

                    <view class="ft-22 c-99 mt-10 text_right">{{ inputVal.length }}/{{ maxLength }}</view>
                </view>
            </view>
            <view class="btn bd-r20" @click="submit">提交</view>
        </view>



    </view>
</template>

<script setup lang="js">
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref, getCurrentInstance } from 'vue';
import navHead from '@/components/navHead.vue';
const inputVal = ref('')
const maxLength = ref(8)
let headData = reactive({
    color: '#fff',
    title: '编辑昵称'
})

const { proxy } = getCurrentInstance();

const reduceList = ref([])
onLoad((options) => {
    const eventChannel = proxy.getOpenerEventChannel();
    // 接收数据
    eventChannel.on('toDetail', (data) => {
        reduceList.value = data.userInfo
        inputVal.value = data.userInfo.nickname
    });
})
const submit = () => {
    const eventChannel = proxy.getOpenerEventChannel();
    eventChannel.emit('fromDetail', { nickname: inputVal.value ? inputVal.value : '' });
    uni.navigateBack(-1)
}

const change = (e) => {
    if (inputVal.value.length > maxLength.value) {
        uni.showToast({
            title: "最多输入8位~",
            icon: 'none',
            duration: 2000
        })
        let a = e.detail.value
        setTimeout(()=>{

            inputVal.value = a.slice(0, 8)
            console.log('inputVal.value',inputVal.value)
        },300)
    }
}
</script>

<style lang="scss" scoped>
.flexCss {
    height: 100vh;

    .box {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: calc(100% - 180rpx);
    }
}

.input_box {
    background-color: #F8F8F8;

    .input_bg {
        background-color: #fff;
        padding: 20rpx;
    }
}

.btn {
    width: 100%;
    height: 78rpx;
    text-align: center;
    line-height: 78rpx;
    color: #DBF046;
    background-color: #333;
    margin-bottom: 20rpx;
}
</style>